<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>使用侦听属性 watch方式一 做一个搜索功能</title>
    <!-- 在 bootcdn 上引入 bootstrap.css -->
    <link
      href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <!-- 引入本地下载好的 vue.js -->
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 创建一个 div   挂载 vue 实例 -->
    <div id="app">
      <h1>实时搜索功能</h1>
      <input type="text" v-model="search" placeholder="请输入搜索内容" />
      <ul>
        <!-- <li>测试</li> -->
        <li v-for="(item,index) in filteredResults" :key="index">
           {{ item.name }} (ID: {{ item.id }})
        </li>
      </ul>
    </div>
    <!-- 脚本多个语言编写都可以，我们学了 javascript -->
    <script type="text/javascript">
      new Vue({
        el: "#app",
        data: {
          search: "",
          items: [
            // 原始数据
            { id: 202319180501, name: "陈家乐" },
            { id: 202319180502, name: "陈丽莹" },
            { id: 202319180503, name: "陈平" },
            { id: 202319180504, name: "邓惠圆" },
            { id: 202319180505, name: "扶云风" },
            { id: 202319180506, name: "付琨怡" },
            { id: 202319180507, name: "何成日" },
            { id: 202319180508, name: "何梓彤" },
            { id: 202319180509, name: "黄寒燕" },
            { id: 202319180510, name: "黄河" },
            { id: 202319180511, name: "黄霞萍" },
            { id: 202319180512, name: "李南凤" },
            { id: 202319180513, name: "李亚辉" },
            { id: 202319180514, name: "刘应昊" },
            { id: 202319180515, name: "龙鑫" },
            { id: 202319180516, name: "马赞崴" },
            { id: 202319180517, name: "宁扬" },
            { id: 202319180518, name: "欧小乐" },
            { id: 202319180519, name: "皮瑶" },
            { id: 202319180520, name: "瞿霆雨" },
            { id: 202319180521, name: "全叔文" },
            { id: 202319180522, name: "任颖佳" },
            { id: 202319180523, name: "王硕" },
            { id: 202319180524, name: "王宇昊" },
            { id: 202319180525, name: "王梓名" },
            { id: 202319180526, name: "吴彦毅" },
            { id: 202319180527, name: "吴耀华" },
            { id: 202319180528, name: "伍丹" },
            { id: 202319180529, name: "伍梅" },
            { id: 202319180530, name: "向嘉豪" },
            { id: 202319180531, name: "谢畅" },
            { id: 202319180533, name: "阳惠芝" },
            { id: 202319180534, name: "杨涵" },
            { id: 202319180535, name: "易紫俊" },
            { id: 202319180536, name: "余泽水" },
            { id: 202319180537, name: "张冰慧" },
            { id: 202319180538, name: "张丽萍" },
            { id: 202319180539, name: "张榕辉" },
            { id: 202319180540, name: "张智炫" },
            { id: 202319180541, name: "钟杰" },
            { id: 202324010428, name: "吴玉蓉" },
          ],
          filteredResults: [] // 存储过滤后的结果
        },
        watch: {
          search(newVal) {
            // 当 search 变化时，触发过滤操作
            this.filterResults(newVal);
          }
        },
        methods: {
            filterResults(keyword) {
                this.filteredResults = this.items.filter((item) =>
                        item.name.includes(keyword) || item.id.toString().includes(keyword)
                    );
            }
        },
        mounted() {
    this.filteredResults = this.items; // 初始化时显示全部数据
  }
      });
    </script>
  </body>
</html>
